<template>
  <div class="BillApplyPageWork">
    <div style="position: absolute; margin-top: 19.9vh; margin-left: 14.2vw">
      <el-input style="width: 17vw" v-model="input1" />
    </div>
    <div style="position: absolute; margin-top: 26.4vh; margin-left: 14.2vw">
      <el-input style="width: 17vw" v-model="input2" />
    </div>
    <div style="position: absolute; margin-top: 32.8vh; margin-left: 14.2vw">
      <el-input style="width: 17vw" v-model="input3" />
    </div>
    <div style="position: absolute; margin-top: 39.3vh; margin-left: 14.2vw">
      <el-input style="width: 17vw" v-model="input4" />
    </div>
    <div style="position: absolute; margin-top: 45.4vh; margin-left: 14.2vw">
      <el-input style="width: 17vw" v-model="input5" />
    </div>
    <div style="position: absolute; margin-top: 62.2vh; margin-left: 15.5vw">
      <el-select
        v-model="input6"
        placeholder="Select"
        size="large"
        style="width: 11vw; height: 4vh; margin-top: -0.5vh"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div style="position: absolute; margin-top: 16vh; margin-left: 50.4vw">
      <el-input style="width: 17vw" v-model="input7" />
    </div>
    <div style="position: absolute; margin-top: 22.5vh; margin-left: 50.4vw">
      <el-input style="width: 17vw" v-model="input8" />
    </div>
    <div style="position: absolute; margin-top: 29vh; margin-left: 50.4vw">
      <el-input style="width: 17vw" v-model="input9" />
    </div>
    <div style="position: absolute; margin-top: 35.5vh; margin-left: 50.4vw">
      <el-input style="width: 17vw" v-model="input10" />
    </div>
    <div style="position: absolute; margin-top: 41.5vh; margin-left: 50.4vw">
      <el-input style="width: 17vw" v-model="input11" />
    </div>
    <div style="position: absolute; margin-top: 48.2vh; margin-left: 50.4vw">
      <el-input style="width: 17vw" v-model="input12" />
    </div>
    <div class="fanhui"></div>
    <div class="tijiao" @click="btnClick"></div>
  </div>
</template>
<script setup lang="ts">
import ElInput from "../../input.vue"; // 确保路径正确
import { useRouter } from "vue-router";
import { ref } from "vue";
const input1 = ref<string>("");
const input2 = ref<string>("");
const input3 = ref<string>("");
const input4 = ref<string>("");
const input5 = ref<string>("");
const input6 = ref<string>("请选择票据类型");
const input7 = ref<string>("");
const input8 = ref<string>("");
const input9 = ref<string>("");
const input10 = ref<string>("");
const input11 = ref<string>("");
const input12 = ref<string>("");
const options1 = [
  {
    value: "0",
    label: "工作票",
  },
  {
    value: "1",
    label: "操作票",
  },
];
const router = useRouter();
const btnClick = () => {
  router.push({ name: "BillApplyRecord" });
};
</script>
<style lang="scss" scoped>
.BillApplyPageWork {
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/image/pjfqsq.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .fanhui {
    width: 10vw;
    height: 5vh;
    position: absolute;
    margin-left: 13vw;
    bottom: 14.5vh;
    background: rgb(9, 23, 49);
  }
  .tijiao {
    width: 9vw;
    height: 4vh;
    position: absolute;
    margin-left: 52.5vw;
    bottom: 14.5vh;
    cursor: pointer;
  }
}
:deep(.el-input__inner) {
  color: #fff !important;
  font-size: 1vw !important;
  box-shadow: none !important;
}
/* 鼠标滑过时不显示边框 */
:deep(.el-input__wrapper:hover) {
  border: none !important;
  box-shadow: none !important;
}

/* 点击时不显示边框 */
:deep(.el-input__wrapper:focus) {
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-input__wrapper) {
  background-color: transparent !important;
  box-shadow: none !important;
}
/* 移除 el-select 在 focus 和 active 状态下的边框 */
:deep(.el-select .el-input .el-input__inner:focus),
:deep(.el-select .el-input .el-input__inner:active) {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: none !important;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: none !important;
}
</style>
